<!DOCTYPE html>
<html lang="en">
    
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>
            Article page
        </title>
        <meta name="description" content="">
        <meta name="author" content="ink, cookbook, recipes">
        <meta name="HandheldFriendly" content="True">
        <meta name="MobileOptimized" content="320">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="shortcut icon" href="../img/ink-favicon.ico">
        <link rel="apple-touch-icon-precomposed" href="../img/touch-icon.57.png">
        <link rel="apple-touch-icon-precomposed" sizes="72x72" href="../img/touch-icon.72.png">
        <link rel="apple-touch-icon-precomposed" sizes="114x114" href="../img/touch-icon.114.png">
        <link rel="apple-touch-startup-image" href="../img/splash.320x460.png"
        media="screen and (min-device-width: 200px) and (max-device-width: 320px) and (orientation:portrait)">
        <link rel="apple-touch-startup-image" href="../img/splash.768x1004.png"
        media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
        <link rel="apple-touch-startup-image" href="../img/splash.1024x748.png"
        media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
        <link rel="stylesheet" type="text/css" href="../css/ink.css">
        
        <!--[if IE 7 ]>
            <link rel="stylesheet" href="../css/ink-ie7.css" type="text/css" media="screen" title="no title" charset="utf-8">
        <![endif]-->
        
        <script type="text/javascript" src="../js/holder.js"></script>
        <script type="text/javascript" src="../js/ink.min.js"></script>
        <script type="text/javascript" src="../js/ink-ui.min.js"></script>
        <script type="text/javascript" src="../js/autoload.js"></script>
        <script type="text/javascript" src="../js/html5shiv.js"></script>
        
        
        <style type="text/css">
            body {
                background: #ededed;
            }
            header {
                padding: 2em 0;
                margin-bottom: 2em;
            }
            header h1 {
                font-size: 2em;
            }
            header h1 small:before  {
                content: "|";
                margin: 0 0.5em;
                font-size: 1.6em;
            }

            article header{
                padding: 0;
                overflow: hidden;
            }

            article footer {
                background: none;
            }

            article {
                padding-bottom: 2em;
                border-bottom: 1px solid #ccc;
            }

            .date {
                float: right;
            }

            summary {
                font-weight: 700;
                line-height: 1.5;
            }

            footer {
                background: #ccc;
                color: #000;
            }
            footer p {
                padding: 0.5em 1em 0.5em 0;
                margin: 0;        
            }
        </style>
    </head>
    
    <body>

        <div class="ink-grid">
            <header>
                <h1 class="push-left medium-100 small-100">
                    site name<small>smaller text</small>
                </h1>
                <nav class="ink-navigation push-right medium-100 small-100">
                    <ul class="menu horizontal black shadowed">
                        <li class=""active><a href="#">item</a></li>
                        <li><a href="#">item</a></li>
                        <li><a href="#">item</a></li>
                    </ul>
                </nav>             
            </header>
            <section class="column-group gutters article">
                <div class="large-70 medium-60 small-100">
                    <article>
                        <header>
                            <h1 class="push-left">Article title</h1>
                            <p class="push-right">Published: <time pubdate="pubdate">2009-10-09</time></p>
                        </header>
                        <summary>But being in a great hurry to resume scolding the man in the purple Shirt, who was waiting for it in the entry, and seeming to hear nothing but the word "clam," Mrs. Hussey hurried towards an open door leading to the kitchen, and bawling out "clam for two," disappeared.</summary>
                        <figure class="vspace">
                            <img src="holder.js/1200x600/auto/ink" alt="">
                            <figcaption class="dark">
                                <p>"Because you wear silver shoes and have killed the Wicked Witch. Besides, you have white in your frock, and only witches and sorceresses wear white."</p>
                            </figcaption>
                        </figure>
                        <p><blockquote>"Queequeg," said I, "do you think that we can make out a supper for us both on one clam?"</blockquote></p>
                        <p>However, a warm savory steam from the kitchen served to belie the apparently cheerless prospect before us. But when that smoking chowder came in, the mystery was delightfully explained. Oh, sweet friends! hearken to me. It was made of small juicy clams, scarcely bigger than hazel nuts, mixed with pounded ship biscuit, and salted pork cut up into little flakes; the whole enriched with butter, and plentifully seasoned with pepper and salt. Our appetites being sharpened by the frosty voyage, and in particular, Queequeg seeing his favourite fishing food before him, and the chowder being surpassingly excellent, we despatched it with great expedition: when leaning back a moment and bethinking me of Mrs. Hussey's clam and cod announcement, I thought I would try a little experiment. Stepping to the kitchen door, I uttered the word "cod" with great emphasis, and resumed my seat. In a few moments the savoury steam came forth again, but with a different flavor, and in good time a fine cod-chowder was placed before us.</p>
                        <footer>
                            <p><small>Creative Commons Attribution-ShareAlike License</small></p>
                        </footer>
                    </article>
                </div>
                <section class="large-30 medium-40 small-100">
                    <h2>Related</h2>
                    <ul class="unstyled">
                        <li class="column-group gutters">
                            <div class="large-40 medium-40 small-50"><img src="holder.js/640x380/auto/ink" alt=""></div>
                            <div class="large-60 medium-60 small-50"><p>"Where's them crabs, Hoo-Hoo?" Edwin demanded. "Granser's set upon  having a snack."</p></div>
                        </li>
                        <li class="column-group gutters">
                            <div class="large-40 medium-40 small-50"><img src="holder.js/640x380/auto/ink" alt=""></div>
                            <div class="large-60 medium-60 small-50"><p>"Where's them crabs, Hoo-Hoo?" Edwin demanded. "Granser's set upon  having a snack."</p></div>
                        </li>
                        <li class="column-group gutters">
                            <div class="large-40 medium-40 small-50"><img src="holder.js/640x380/auto/ink" alt=""></div>
                            <div class="large-60 medium-60 small-50"><p>"Where's them crabs, Hoo-Hoo?" Edwin demanded. "Granser's set upon  having a snack."</p></div>
                        </li>
                        <li class="column-group gutters">
                            <div class="large-40 medium-40 small-50"><img src="holder.js/640x380/auto/ink" alt=""></div>
                            <div class="large-60 medium-60 small-50"><p>"Where's them crabs, Hoo-Hoo?" Edwin demanded. "Granser's set upon  having a snack."</p></div>
                        </li>
                        <li class="column-group gutters">
                            <div class="large-40 medium-40 small-50"><img src="holder.js/640x380/auto/ink" alt=""></div>
                            <div class="large-60 medium-60 small-50"><p>"Where's them crabs, Hoo-Hoo?" Edwin demanded. "Granser's set upon  having a snack."</p></div>
                        </li>
                    </ul>
                </section>
            </section>
            <section class="column-group gutters">
                <div class="large-20 medium-20 small-100">
                    <h3>heading</h3>
                    <img src="holder.js/1200x600/auto/ink" alt="">
                    <p>"Red is not the right word," was the reply. "The plague was scarlet.  The whole face and body turned scarlet in an hour's time. Don't I  know? Didn't I see enough of it? And I am telling you it was scarlet  because&mdash;well, because it was scarlet. There is no other word for it."</p>
                </div>
                <div class="large-20 medium-20 small-100">
                    <h3>heading</h3>
                    <img src="holder.js/1200x600/auto/ink" alt="">
                    <p>"Red is not the right word," was the reply. "The plague was scarlet.  The whole face and body turned scarlet in an hour's time. Don't I  know? Didn't I see enough of it? And I am telling you it was scarlet  because&mdash;well, because it was scarlet. There is no other word for it."</p>
                </div>
                <div class="large-20 medium-20 small-100">
                    <h3>heading</h3>
                    <img src="holder.js/1200x600/auto/ink" alt="">
                    <p>"Red is not the right word," was the reply. "The plague was scarlet.  The whole face and body turned scarlet in an hour's time. Don't I  know? Didn't I see enough of it? And I am telling you it was scarlet  because&mdash;well, because it was scarlet. There is no other word for it."</p>
                </div>
                <div class="large-20 medium-20 small-100">
                    <h3>heading</h3>
                    <img src="holder.js/1200x600/auto/ink" alt="">
                    <p>"Red is not the right word," was the reply. "The plague was scarlet.  The whole face and body turned scarlet in an hour's time. Don't I  know? Didn't I see enough of it? And I am telling you it was scarlet  because&mdash;well, because it was scarlet. There is no other word for it."</p>
                </div>
                <div class="large-20 medium-20 small-100">
                    <h3>heading</h3>
                    <img src="holder.js/1200x600/auto/ink" alt="">
                    <p>"Red is not the right word," was the reply. "The plague was scarlet.  The whole face and body turned scarlet in an hour's time. Don't I  know? Didn't I see enough of it? And I am telling you it was scarlet  because&mdash;well, because it was scarlet. There is no other word for it."</p>
                </div>
            </section>
        </div>
        <footer>
        <div class="ink-grid">
            <nav class="ink-navigation push-left medium-100 small-100 small-push-left">
                <ul class="menu horizontal">
                    <li class=""active><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                    <li><a href="#">item</a></li>
                </ul>
            </nav>
            <p class="push-right small-100">some text</p>
        </div>
        </footer>
    </body>
</html>
